<template>
  <!--  <div>节点管理</div>-->
  <div>
    <a-space>
      <a-select
        label-in-value
        @focus="focus"
        style="width: 120px"
        @change="handleChange"
        placeholder="请选择集群"
      >
        <!--        <a-select-option value="jack"> Jack </a-select-option>-->
        <a-select-option
          v-for="clusters in cluster.data.data"
          :key="clusters.id"
          :label="clusters.clusterName"
        >
          {{ clusters.clusterName }}</a-select-option
        >
      </a-select>
      <a-input-search
        :value="valueInput"
        placeholder="根据名称过滤"
        style="width: 200px"
        @search="onSearch"
      >
      </a-input-search>
    </a-space>
    <a-table
      :columns="columns"
      :data-source="data"
      @change="onChange"
      :row-selection="rowSelection"
    />
  </div>
</template>
<script>
import axios from "axios";

const columns = [
  {
    title: "名称/IP",
    dataIndex: "name",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "角色",
    dataIndex: "typeMeta.kind",
  },
  {
    title: "容器组（已分配量/总额度）",
    align: "center",
  },
  {
    title: "CPU请求/限制(核)",
    align: "center",
  },
  {
    title: "内存请求/限制(字节)",
    align: "center",
  },
  {
    title: "Kubelet版本Runtime版本/OS",
    align: "center",
  },
  {
    title: "创建时间",
  },
  {
    title: "操作",
  },
];
const data = [];
// const data = [
//   {
//     key: "1",
//     name: "John Brown",
//     age: 32,
//     address: "New York No. 1 Lake Park",
//   },
//   {
//     key: "2",
//     name: "Jim Green",
//     age: 42,
//     address: "London No. 1 Lake Park",
//   },
//   {
//     key: "3",
//     name: "Joe Black",
//     age: 32,
//     address: "Sidney No. 1 Lake Park",
//   },
//   {
//     key: "4",
//     name: "Jim Red",
//     age: 32,
//     address: "London No. 2 Lake Park",
//   },
// ];

const cluster = {
  clusterName: undefined,
  data: [],
  nodeData: [],
  clusterId: "",
  // 节点名称
  nodeName: "",
};
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

function onChange(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

const valueInput = '';
export default {
  data() {
    return {
      data,
      cluster,
      columns,
      rowSelection,
      valueInput,
    };
  },
  mounted() {
    this.getK8SCluster();
  },
  methods: {
    getK8SCluster() {
      const that = this;
      axios.get("http://localhost:5000/api/v1/k8s/cluster").then((res) => {
        that.cluster.data = res.data.data;
        console.log(res.data.data);
      });
    },

    onChange,
    focus() {},
    handleChange() {
      console.log("change"); // { key: "lucy", label: "Lucy (101)" }
    },
    onSearch() {
      alert("search");
    },
  },
};
</script>
